<template>
	<view class="shop-page">
		<u-navbar autoBack bgColor="transparent" leftIconColor="#fff"></u-navbar>
		
		<u-swiper
			:list="swiperList"
			keyName="pic"
			radius="0"
			height="382rpx"
			circular indicatorStyle="right: 20px"
			@change="swiperChange"
		>
			<view slot="indicator" class="indicator-num">
				<view class="left">
					<text>{{ swiperCurrent + 1 }}</text>
				</view>
				<view class="right">
					<text>{{ swiperList.length }}</text>
				</view>
			</view>
		</u-swiper>
		<view class="tabs-box">
			<u-tabs
				:list="tabList"
				:current="tabCurrent"
				keyName="title"
				lineColor="#333333"
				@change="tabChange"
			></u-tabs>
		</view>
		<scroll-view scroll-y class="list-box" @scrolltolower="reachBottom">
			<view class="list">
				<view class="item" v-for="(item, index) in goodsList" :key="index" @click="goDetail(item.skuInfo.spu)">
					<image class="image" :src="item.img_path" mode="aspectFill"></image>
					<view class="content">
						<view class="title u-line-1">{{ item.name }}</view>
						<view class="price">￥{{ item.price }}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</scroll-view>
	</view>
</template>

<script>
	import { getSwiper, getCategory, getGoodsList } from '@/api/api.js'
	
	export default {
		data () {
			return {
				swiperCurrent: 0,
				swiperList: [],
				
				tabCurrent: 0,
				tabList: [],
				
				category_id: 0,
				goodsList: [],
				
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onLoad () {
			getSwiper({ pos: 'shop' }).then(res => {
				if (res) {
					this.swiperList = res.data.banner
				}
			})

			getCategory().then(res => {
				if (res) {
					this.tabList = res.data.data
					
					this.category_id = res.data.data[0].id
					this.loadData()
				}
			})
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.goodsList = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return

				this.status = 'loading'
				this.page = ++this.page

				const goodsReq = await getGoodsList({
					page: this.page,
					page_size: 10,
					filters: {
						goods_type: 2,
						category_id: this.category_id 
					}
				})
				
				if (goodsReq) {
					this.goodsList = this.goodsList.concat(goodsReq.data.data)
					this.last_page = goodsReq.data.last_page
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			reachBottom () {
				this.getListData()
			},
			
			swiperChange (e) {
				this.swiperCurrent = e.current
			},
			tabChange (e) {
				const index = e.index
				this.tabCurrent = index
				
				this.category_id = this.tabList[index].id
				this.loadData()
			},
			goDetail (spu) {
				uni.navigateTo({
					url: '/pages/my/shop/detail?spu=' + spu
				})
			}
		}
	}
</script>

<style lang="scss">
.shop-page {
	min-height: 100%;
	background-color: $bg-color;
	.tabs-box {
		background-color: #fff;
	}
	.list-box {
		box-sizing: border-box;
		padding: 20rpx;
		height: calc(100vh - 382rpx - 44px);
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 24rpx;
			.item {
				width: 342rpx;
				border-radius: 16rpx;
				background-color: #fff;
				overflow: hidden;
				.image {
					width: 342rpx;
					height: 320rpx;
				}
				.content {
					padding: 20rpx 18rpx 28rpx;
					.title {
						color: #404040;
						font-size: 26rpx;
						font-weight: bold;
					}
					.price {
						margin-top: 20rpx;
						color: #cd2a1b;
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}
</style>
